<template>
	<div class="CompontensViews" :style="{ '--table-radio': tableRadio, '--draw-radio': drawRadio }">
		<!-- 头部搜索 -->
		<div class="right-content-title">
			<div class="btns">
				<el-button size="mini" v-show="styleOptionsValue == 1 || styleOptionsValue == 2"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;margin-left: 10px;"
					@click="ViewFn(1)"><i class="el-icon-caret-top" style="text-align: center;"></i></el-button>
				<el-button size="mini" v-show="styleOptionsValue == 1 || styleOptionsValue == 2"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(2)"><i class="el-icon-caret-bottom" style="text-align: center;"></i></el-button>
			</div>
			<div class="left-select">
				<!-- 显示样式 -->
				<div class="selectView">
					<!-- <div class="selectViewLabel">
            {{ $t("message.bhView.label.style") }}
          </div>
          <el-select
            v-model="styleOptionsValue"
            :placeholder="$t('message.bhView.label.placeholderSearch')"
            class="select-ipt show-ipt"
            @change="styleFun"
          >
            <el-option
              v-for="item in styleOptions"
              :key="item.id" 
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select> -->
					<el-button size="mini" type="primary" style="height: 24px;line-height: 0;font-size: 14px;"
						class="select-btn" v-if="styleOptionsValue == 2" @click="(styleOptionsValue = 1), styleFun()">
						{{ $t("message.styleOptions.value1") }}
					</el-button>
					<el-button size="mini" type="primary" style="height: 24px;line-height: 0;font-size: 14px;"
						class="select-btn" v-if="styleOptionsValue == 1" @click="(styleOptionsValue = 3), styleFun()">
						{{ $t("message.styleOptions.value2") }}
					</el-button>
					<el-button size="mini" type="primary" style="height: 24px;line-height: 0;font-size: 14px;"
						class="select-btn" v-if="styleOptionsValue == 3" @click="(styleOptionsValue = 2), styleFun()">
						{{ $t("message.styleOptions.value3") }}
					</el-button>
				</div>
				<!-- 检查区分 -->
				<div class="selectView">
					<div class="selectViewLabel">
						{{ $t("message.bhView.label.check") }}
					</div>
					<el-select v-model="value" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-ipt" @change="selectOption" @focus="getCheckPointDataApi(leftTabelRow.macCode)">
						<el-option v-for="item in options" :key="item.key" :label="item.value"
							:value="item.key"></el-option>
					</el-select>
				</div>
				<!-- 腐蚀率、测定部位、 -->
				<div class="selectView">
					<div class="selectViewLabel">
						{{ $t("message.selectLable.value1") }}
					</div>
					<el-select v-model="colorOptionsValueSelect" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-ipt samll-ipt" @change="pjFn">
						<el-option v-for="(item, index) in colorOptions" :key="index + 'top'" :label="item.value"
							:value="item.key"></el-option>
					</el-select>
					<!-- 腐蚀率的值 -->
					<el-select style="margin-left: 8px" v-model="judgValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-ipt judgValue-ipt" @change="judgChange()">
						<el-option v-for="item in legendListSelect" :key="item.judg_sig + item.judg_crr"
							:label="item.name" :value="item.judg_sig + item.judg_crr"></el-option>
					</el-select>
				</div>

				<!-- 测定部位、 -->
				<div class="selectView">
					<div class="selectViewLabel">
						{{ $t("message.selectLable.value2") }}
					</div>
					<el-select v-model="positionValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-ipt positionValue" @focus="getPositionDataApi(leftTabelRow.macCode)" @change="postionValueFn">
						<el-option v-for="(item, index) in positionList" :key="index" :label="item.value"
							:value="item.key"></el-option>
					</el-select>
				</div>
				<!-- 刷新 -->
				<el-tooltip class="item" effect="dark" :content="$t('message.public.refresh')" placement="top">
					<div class="refresh" @click="freshFn

						">
						<i class="iconfont">&#xe81f;</i>
					</div>
				</el-tooltip>
				<!-- 3D viewer -->
				<!-- <div class="DViewer">
					<el-tooltip class="item" effect="dark" :content="$t('message.tooltip.title_2')" placement="top">
						<i :class="'iconfont' + (!is3DModalEnable ? ' disable' : '')" @click="modelClick">&#xe8e5;</i>
					</el-tooltip>
				</div> -->
				<el-tooltip class="item" effect="dark" content="仕様" placement="top">
					<i class="el-icon-document" @click="cpsClick"></i>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="結果" placement="top">
					<i class="el-icon-document-checked" @click="rightCpsClick"></i>
				</el-tooltip>

			</div>
			<div class="right-select">
				<!-- 年月日点击请求表格数据 -->
				<el-button size="mini" type="primary" style="height: 24px;line-height: 0;font-size: 14px;"
					@click="changeDate(index)" v-for="(Btn, index) in btnList" :key="Btn.name" :class="index == btnActive
						? 'date-btn-active date-btn'
						: 'date-btn'
						" v-if="index == btnActive">
					{{ Btn.name }}
				</el-button>
				<div class="select-tab">
					<div class="select-tab-label">
						{{ $t("message.bhView.btnName.LifeAssessment") }}
					</div>
					<el-select v-model="LifeAssBaseVaule" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-tab-ipt" @change="LifeAssBaseSearch">
						<el-option v-for="item in LifeAssBaseDate" :key="item.value" :label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</div>
			</div>
		</div>
		<!-- tabel -->
		<div class="tabel-view-wrapper">
			<BHTabel ref="bHTabel" :tableHeight="tableHeight" :prposTabelData="prposTabelData" :loading="loading"
				@getBHTabelRow="getBHTabelRow" :tabelConfigObject="tabelConfigObject" :empty="empty">
			</BHTabel>
		</div>
		<!-- 类型筛选 -->
		<div class="select-legend-view" v-show="styleOptionsValue != 3">
			<div class="left-view">
				<div class="select-legend">
					<div class="select-legend-label" v-show="styleOptionsValue == 1">
						{{ $t("message.bhView.btnName.type") }}
					</div>
					<el-select v-show="styleOptionsValue == 1" v-model="timeStartValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-legend--ipt" @change="changeChartDate">
						<el-option v-for="(item, index) in timeStart" :key="index" :label="item.label"
							:value="item.id"></el-option>
					</el-select>
					<div style="margin: 0 8px" v-if="styleOptionsValue == 1">
						-
					</div>
					<el-select v-show="styleOptionsValue == 1" v-model="timeEndValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-legend--ipt" @change="changeChartDate">
						<el-option v-for="(item, index) in timeEnd" :key="index" :label="item.label"
							:value="item.id"></el-option>
					</el-select>
					<el-select v-show="styleOptionsValue == 2" v-model="colorOptionsValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-legend--ipt" @change="colorOptionsChange">
						<el-option v-for="item in colorOptions" :key="item.key" :label="item.value"
							:value="item.key"></el-option>
					</el-select>
				</div>
				<div v-show="styleOptionsValue == 2" class="select-legend-color" v-for="(Item, index) in legendList"
					:key="index">
					<div class="select-legend-color-box" :style="`background:${Item.color}`"></div>
					<div class="select-legend-color-label">{{ Item.name }}</div>
				</div>
			</div>
			<span v-show="styleOptionsValue == 1 || styleOptionsValue == 2" class="messageColor">


				{{ $t("message.calculationRules.value1") }}
				<span v-if="CalculationRules.longTerm == 1">{{ $t("message.calculationRules.value2")
					}}<span v-if="CalculationRules.shortTerm == 1 ||
						CalculationRules.regression == 1
					">
						/
					</span></span><span v-if="CalculationRules.shortTerm == 1">{{ $t("message.calculationRules.value3")
					}}<span v-if="CalculationRules.regression == 1">
						/
					</span> </span><span v-if="CalculationRules.regression == 1">{{
						$t("message.calculationRules.value4")
					}}</span>

				<!-- <el-button size="mini" v-if="CalculationRules.regression == 1"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;margin-left: 10px;"
					@click="ViewFn(1)"><i class="el-icon-caret-top" style="text-align: center;"></i></el-button>
				<el-button size="mini" v-if="CalculationRules.regression == 1"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(2)"><i class="el-icon-caret-bottom" style="text-align: center;"></i></el-button> -->
			</span>



		</div>
		<!-- cad -->
		<div class="CADView" v-show="styleOptionsValue != 3">
			<div id="LineEcharts" v-show="styleOptionsValue == 1"></div>
			<CadViewForBH v-show="styleOptionsValue == 2" ref="cadViewForBH" :isShow="styleOptionsValue == 2"
				@onMarkupSelected="onMarkupSelected" />
		</div>
		<!-- 3D Viewer -->
		<div class="Viewer" v-if="ViewerFlag">
			<!-- <iframe src="/SCENE" frameborder="0"></iframe> -->
			<ThreeDScene class="three-view" ref="threeView" @onCloseClick="modelClick"
				@on3dBallMarkerClick="onThreedMarkupSelected" :inmacCode="leftTabelRow.macCode"
				:incolorOptionsValueSelect="colorOptionsValueSelect" :incolorOptionsValue="colorOptionsValue"
				:inLifeAssBaseVaule="LifeAssBaseVaule" :inpltCode="leftTabelRow.pltCode" :inmacName="macName"
				:invaluePlant="valuePlant" :inmacType="leftTabelRow.macType" :instyleOptionsValue="styleOptionsValue"
				:invalue="value" :injudgValue="judgValue" :inpositionValue="positionValue"
				:defaultBgColor="defaultThreedBgColor" />
		</div>

		<!-- 右侧信息框 -标准--->
		<div class="right-Viewer" v-if="rightViewFlag && !$hasOption('OPT_IDEM')">
			<rightViewTabs ref="rivhtView1" :tableItemData="detailBhlTabel" :rightViewFlag="rightViewFlag"
				@onCloseClick="cpsClick"></rightViewTabs>
		</div>
		<!-- 出光 -->
		<div class="right-Viewer" v-if="rightViewFlag && $hasOption('OPT_IDEM')">
			<rightViewTabsCustomer1 ref="rivhtView1" :tableItemData="detailBhlTabel" :rightViewFlag="rightViewFlag"
				@onCloseClick="cpsClick"></rightViewTabsCustomer1>
		</div>

		<!-- resultTabCompontens -->
		<div class="right-Viewer" v-if="rightResultViewFlag">
			<resultTabCompontens @onCloseClick="rightCpsClick" :tableItemData="detailBhlTabel"
				:rightResultViewFlag="rightResultViewFlag"></resultTabCompontens>
		</div>
	</div>
</template>

<script>
import $ from "jquery";
import {
	getLifeAssBaseDate,
	gethckTabData,
	getCorrData,
	getCalculRules,
	getCorrColorData,
	getLineChartData,
	getCheckPointData,
	getSysConfig,
	getPositionData,
	getTotDimensInteractive,
	getThckLineChatDate,
	getOfferHeaderObjctl
} from "../../api/api";
import { getLocalStorage } from "../../utils/storage";
import BHTabel from "./BHTabel";
import CadViewForBH from "./CadViewForBH";
import eventBus from "../../eventBus/bus";
import ThreeDScene from "../ThreeDScene/ThreeDScene";
import rightViewTabs from "./BHDialogCompontens/TabsCompontens.vue";
// src\components\Customize\Customer003\views\BHDialogCompontens\TabsCompontens.vue
import rightViewTabsCustomer1 from "@/components/Customize/Customer003/views/BHDialogCompontens/TabsCompontens.vue";
import resultTabCompontens from "./BHDialogCompontens/ResultTabCompontens.vue";
var algebra = require("algebra.js");
export default {
	name: "BHCompontens",
	props: {
		leftTabelRow: Object,
		valuePlant: String,
		macName: String,
	},
	data() {
		return {
			Data: {},
			gethckTabDataApiFlg: 0,
			testFlg: 0,
			BHTabelKey: 0,
			// 显示样式
			styleOptions: [
				{
					value: this.$t("message.styleOptions.value1"),
					id: 2,
				},
				{
					value: this.$t("message.styleOptions.value2"),
					id: 1,
				},
				{
					value: this.$t("message.styleOptions.value3"),
					id: 3,
				},
			],
			styleOptionsValue: 2,
			value: "", //检查区分
			valueTemp: "",
			options: [],
			btnActive: 2, //年月日类型
			btnList: [
				//年月日list
				{ name: this.$t("message.bhView.btnName.dateBtn1") },
				{ name: this.$t("message.bhView.btnName.dateBtn2") },
				{ name: this.$t("message.bhView.btnName.dateBtn3") },
			],
			LifeAssBaseDate: [], //寿命基准年
			LifeAssBaseVaule: "",
			LifeAssBaseVauleTemp: "",
			tableHeight: 278,
			prposTabelData: [], // tabel数据
			loading: false, // tabel加载loading
			pageIndex: 1,
			pageSize: 2000,
			timeStart: [],
			timeEnd: [],
			timeStartValue: "",
			timeEndValue: "",
			colorOptions: [],
			colorOptionsValue: null,
			colorOptionsValueSelect: "", // 腐蚀率
			colorOptionsValueSelectTemp: "", // 腐蚀率
			positionValue: "-1",
			positionValueTemp: "-1",
			positionList: [],
			legendList: [],
			legendListSelect: [],
			CalculationRules: {},
			tabelConfigObject: {
				GRN_POS_NAME: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				POS_NAME: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				CL_NAME: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				MSR_PNT: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				PART_NAME: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				ORG_THCK: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				MGT_THCK: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				LMT_THCK: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				MTR_NAME: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				SIZ_NAME: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				SCH_NAME: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				WAY_NAME: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				USE_YEAR: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				ACC_CNT: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				ORG_LST_THK: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				LIFE_L: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				LST_LST_THK: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				LIFE_S: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				FIN_LST_THK: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				LIFE_M: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				THCK_JUDGE: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				LIFE_DATE: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				INIT_THCK_VAL: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
			},
			loadFlag: true,
			userName: getLocalStorage("userName"),
			judgValue: "", //腐蚀率的值
			judgValueTemp: "", //腐蚀率的值

			ViewerFlag: false,
			interval: 1,

			empty: "",
			rightViewFlag: false,
			rightResultViewFlag: false,

			tableRadio: "50%",
			nTableRadio: 0.5,
			drawRadio: "50%",

			tableItemData: null,

			// 3D是否可以点
			is3DModalEnable: false,

			defaultThreedBgColor: [255, 251, 191],

			_detailBhlTabel: {}		//补-记录折线图上次的数据，
		};
	},
	components: {
		BHTabel,
		CadViewForBH,
		ThreeDScene,
		rightViewTabs,
		rightViewTabsCustomer1,
		resultTabCompontens,
	},
	watch: {
		styleOptionsValue: {
			handler: function (nVal) {
				if (nVal == 1) {
					console.log(nVal, this._detailBhlTabel)

					setTimeout(() => {
						this.getBHTabelRow(this._detailBhlTabel);
					}, 300);
				}
			}
		},
		leftTabelRow: {
			deep: true,
			handler: function (newV, oldV) {
				console.log(newV, "BHnewV");
				this.value = "";

				// 同じmacNameの場合は検査区分を引き継ぐ
				if (newV.macName == oldV.macName) {
					this.value = this.$store.state.checkCode;
				}
				else {
					// macNameを変更した時点で検査区分をクリアする
					this.$store.commit("changeCheckCode", this.value);
				}
				this.positionValue = "-1";
				this.freshFn(false);
				if (JSON.stringify(newV) === JSON.stringify(oldV)) {
					return;
				}
				if (this.rightViewFlag) {
					if (this.styleOptionsValue == 1) {
						this.getLineChartDataApi(this.prposTabelData[0]);
					} else if (this.styleOptionsValue == 2) {
						this.updateSvgAndMarkups();
					}
				}
				if (this.rightResultViewFlag) {
					// this.rightCpsClick();
					if (this.styleOptionsValue == 1) {
						this.getLineChartDataApi(this.prposTabelData[0]);
					} else if (this.styleOptionsValue == 2) {
						this.updateSvgAndMarkups();
					}
				}
				if (this.ViewerFlag) {
					// this.modelClick();
					//	只切换机器番号，3D图显示隐藏切换
					if (this.styleOptionsValue == 1) {
						this.getLineChartDataApi(this.prposTabelData[0]);
					} else if (this.styleOptionsValue == 2) {
						this.updateSvgAndMarkups();
					}
				}

				this.$emit("getNumberData", 0);
				// this.colorOptionsValueSelect = this.colorOptions[0].key;
				// this.colorOptionsValueSelectTemp = this.colorOptions[0].key;

				//this.value = "";
				this.positionValue = "-1";
				this.gethckTabDataApi(
					newV.macCode,
					this.LifeAssBaseVaule,
					this.pageSize,
					this.pageIndex,
					newV.macType,
					newV.pltCode,
					this.btnActive,
					this.value,
					this.colorOptionsValue,
					this.judgValue,
					this.positionValue
				);

				this.getThreeNumberList(newV.macCode);
			},
		},
	},
	methods: {
		//	图画框放大缩小
		ViewFn(type) {
			console.log(this.tableRadio, type, '123');
			if ((this.tableRadio == '20.00%' && type == 1) || (this.tableRadio == '80.00%' && type == 2)) {
				return
			}
			if (type == 1) {
				this.$nextTick(function () {
					this.tableRadio = this.currentFn1(this.tableRadio);
					this.drawRadio = this.currentFn(this.drawRadio);
					this.nTableRadio += 0.2;
					this.tableHeight =
						$(".tabel-view-wrapper").height() - 75

					this.$refs.cadViewForBH.loadSvg();
				})
			}
			if (type == 2) {
				this.$nextTick(function () {
					this.tableRadio = this.currentFn(this.tableRadio);
					this.drawRadio = this.currentFn1(this.drawRadio);
					this.nTableRadio -= 0.2;
					this.tableHeight =
						$(".tabel-view-wrapper").height() + 75

					this.$refs.cadViewForBH.loadSvg();
				})
			}
		},
		currentFn(val) {
			// 将当前值转换为数字
			let currentValue = parseFloat(val.replace('%', ''));
			// 增加 10%
			currentValue += 10;

			// 转换回字符串并添加 '%'
			return currentValue.toFixed(2) + '%';
		},
		currentFn1(val) {
			// 将当前值转换为数字
			let currentValue = parseFloat(val.replace('%', ''));
			// 增加 10%
			currentValue -= 10;

			// 转换回字符串并添加 '%'
			return currentValue.toFixed(2) + '%';
		},
		// 评价
		pjFn() {

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				this.colorOptionsValueSelectTemp = this.colorOptionsValueSelect;

				this.judgValue = this.legendListSelect[0].name;
				this.$store.commit('changeColorOptionsCode', this.colorOptionsValueSelect);
				// 評価項目を変更した時点で、評価値も更新する
				this.$store.commit("changeJudgCode", this.judgValue);
				this.getCorrColorDataApiTop(this.colorOptionsValueSelect);
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}
		},
		//布局样式筛选
		styleFun() {
			console.log('this.styleOptionsValue', this.styleOptionsValue);
			this.$emit('changeBtnTxt', this.styleOptionsValue)
			let _this = this;
			this.$store.commit("changeBHStyleCode", this.styleOptionsValue);
			if (this.styleOptionsValue == 3) {
				this.$nextTick(function () {
					this.tableHeight = $(".CompontensViews").height() - 50;
				});
				this.tableRadio = '100%';
				this.drawRadio = '0%';
				this.nTableRadio = 0.5;
				return;
			} else {
				this.tableRadio = '50%';
				this.drawRadio = '50%';
				this.nTableRadio = 0.5;
				this.$refs.cadViewForBH.loadSvg();
			}
			//切换布局样式如果是折线图 默认绘制第一条数据
			if (this.styleOptionsValue == 1) {
				this.getLineChartDataApi(this.prposTabelData[0]);
				setTimeout(function () {
					_this.$nextTick(function () {
						_this.tableHeight =
							$(".CompontensViews").height() * this.nTableRadio -
							40;
					});
				});
				return;
			}
			setTimeout(function () {
				_this.$nextTick(function () {
					//     _this.tableHeight = 278;
					_this.tableHeight =
						$(".CompontensViews").height() * this.nTableRadio - 40;
				});
			});
		},
		// 选择日期展示表格
		changeDate(index) {

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			let Fn = () => {
				this.btnActive = index + 1;
				if (this.btnActive > 2) {
					this.btnActive = 0;
				}
				this.$store.commit("changeBHDate", this.btnActive);
				console.log('触发条件gethckTabDataApi-1111');
				this.gethckTabDataApi(
					this.leftTabelRow.macCode,
					this.LifeAssBaseVaule,
					this.pageSize,
					this.pageIndex,
					this.leftTabelRow.macType,
					this.leftTabelRow.pltCode,
					this.btnActive,
					this.value,
					this.colorOptionsValue,
					this.judgValue,
					this.positionValue
				);
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}
		},

		//获取寿命评价基准年月
		getLifeAssBaseDateApi() {
			getLifeAssBaseDate().then((res) => {
				if (res.data.code != 0) {
					return;
				}
				res.data.data.forEach((dateItem) => {
					this.LifeAssBaseDate.push({
						label: dateItem,
						value: dateItem,
					});
				});
				this.$store.state.lifeAssBaseCode
					? (this.LifeAssBaseVaule =
						this.$store.state.lifeAssBaseCode)
					: (this.LifeAssBaseVaule = this.LifeAssBaseDate[6].value);
			});
		},
		//寿命评价基准年月搜索
		LifeAssBaseSearch() {
			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			let Fn = () => {
				this.LifeAssBaseVauleTemp = this.LifeAssBaseVaule;

				this.$store.commit("changeLifeAssBaseCode", this.LifeAssBaseVaule);
				console.log('触发条件gethckTabDataApi-222');
				this.gethckTabDataApi(
					this.leftTabelRow.macCode,
					this.LifeAssBaseVaule,
					this.pageSize,
					this.pageIndex,
					this.leftTabelRow.macType,
					this.leftTabelRow.pltCode,
					this.btnActive,
					this.value,
					this.colorOptionsValue,
					this.judgValue,
					this.positionValue
				);
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}
		},
		//获取壁厚表格数据
		gethckTabDataApi(
			dmgCode,
			lifeAssBaseDate,
			pageSize,
			pageIndex,
			macType,
			pltCode,
			DateType,
			Option,
			CorrCode,
			CorrJudg,
			PosCode,
			Num = false
		) {
			this.gethckTabDataApiFlg++
			if (this.gethckTabDataApiFlg != 1) {
				return
			}
			setTimeout(() => {
				this.gethckTabDataApiFlg = 0;
			}, 500);
			this.getSysConfigApi();
			let dataJson = {
				Account: getLocalStorage("userName"),
				dmgCode: dmgCode,
				lifeAssBaseDate: lifeAssBaseDate,
				pageSize: pageSize,
				pageIndex: pageIndex,
				macType: macType,
				pltCode: pltCode || this.$store.state.pltCode,
				DateType: DateType,
				Option: Option == "0" || Option == '' || Option == undefined ? "" : Option,
				CorrCode: CorrCode ? parseInt(CorrCode) : 0,
				CorrJudg: CorrJudg == "ALL" ? "" : CorrJudg,
				PosCode: PosCode == "-1" || PosCode == "" || PosCode == undefined ? "" : PosCode || this.positionValue,
			};
			if (!lifeAssBaseDate) {
				return;
			}
			if (this.gethckTabDataApiCode != -310) {
				this.loading = true;
			}

			this.updateSvgAndMarkups();
			gethckTabData(dataJson).then((res) => {
				console.log(res.data.data, "PPPPPPPPPPPPPP")
				console.log(JSON.parse(res.data.data), "PPPPPPPPPPPPPP")

				this.loading = false;
				!res.data.data ? (this.empty = "No Data") : (this.empty = "");
				this.gethckTabDataApiCode = res.data.code;
				// this.$emit("getNumberData", 0);
				this.BHTabelKey++

				this.prposTabelData = [];

				if (res.data.code != 0) {
					//	123123
					setTimeout(() => {
						this.$refs.rivhtView1.DataChange = false;
					}, 500);
				}

				if (res.data.code == -1) {
					this.prposTabelData = [];
					this.$alert(res.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
					return;
				}
				if (res.data.code == -300) {
					this.prposTabelData = [];
					return;
				}
				if (res.data.code == -310) {
					return;
				}
				this.prposTabelData = [];
				console.log(res.data.data);
				// JSON.parse(res.data.data.replace(/[`'`\\]/g, '')).forEach((Element) => {
				// JSON.parse(res.data.data.replace(/[``\\]/g, '')).forEach((Element) => {
				// 	this.prposTabelData.push(Element);
				// });
				this.prposTabelData = JSON.parse(res.data.data);
				this.$emit("getNumberData", this.prposTabelData.length);
				if (this.styleOptionsValue == 1) {
					this.detailBhlTabel = this.prposTabelData[0];
					this.getLineChartDataApi(this.prposTabelData[0]);
				}
				if (this.styleOptionsValue == 2) {
					this.getCorrColorDataApi(this.colorOptionsValue);
				}
				setTimeout(() => {
					eventBus.$emit('SET_H', Num)
				}, 300);

			});
			// .finally(() => {
			//     this.loading = false;
			// });
		},
		//获取右上表格某一行数据
		getBHTabelRow(row, flg = true) {
			console.log(row)
			if (flg) {
				this.detailBhlTabel = row;
			}
			this._detailBhlTabel = row;
			console.log(this.detailBhlTabel)

			// this.timeStart = [];
			// this.timeEnd = [];
			if (this.styleOptionsValue == 1) {
				this.getLineChartDataApi(row);
				return;
			}
			if (this.styleOptionsValue == 2) {
				this.getCorrColorDataApi(this.colorOptionsValue);
			}
			if (row) {
				// 更新右下图纸内标记信息
				this.$refs.cadViewForBH.setSelectedMarkup(row.POS_NAME);

				if (this.$refs.threeView) {
					this.$refs.threeView.toSelect3dBallMarkerByStr(
						row.POS_ORDR
					);
				}
			}
		},
		//获取腐蚀率 余寿命等
		getCorrDataApi() {
			let dataJson = {
				Type: 2,
			};
			getCorrData(dataJson).then((res) => {
				if (res.data.code != 0) {
					this.colorOptions = [];
					return;
				}
				this.colorOptions = res.data.data;
				this.colorOptionsValue = this.colorOptions[0].key;
				this.colorOptionsValueSelect = this.colorOptions[0].key;
				this.colorOptionsValueSelectTemp = this.colorOptions[0].key;
				this.getCorrColorDataApiTop(this.colorOptionsValueSelect);
				getCalculRules().then((res) => {
					this.CalculationRules = res.data.data;
				});
			});
		},
		// 腐蚀率改变
		colorOptionsChange() {
			this.getCorrColorDataApi(this.colorOptionsValue);
			this.updateSvgAndMarkups();
		},
		//获取图纸球标等颜色信息
		getCorrColorDataApi(colorOptionsValue = '206') {
			let dataJson = {
				corrCode: colorOptionsValue || '206',
				type: 2,
				IsSearchCorr: "false",
			};
			getCorrColorData(dataJson).then((res) => {
				this.legendList = [];
				if (res.data.code != 0) {
					return;
				}
				this.legendList = res.data.data;
			});
		},
		//获取腐蚀率的值
		getCorrColorDataApiTop(colorOptionsValueSelect = '206') {
			this.colorOptionsValue = this.colorOptionsValueSelect;
			console.log('触发条件gethckTabDataApi-333');
			this.gethckTabDataApi(
				this.leftTabelRow.macCode,
				this.LifeAssBaseVaule,
				this.pageSize,
				this.pageIndex,
				this.leftTabelRow.macType,
				this.leftTabelRow.pltCode,
				this.btnActive,
				this.value,
				this.colorOptionsValue,
				this.judgValue,
				this.positionValue
			);
			let dataJson = {
				corrCode: colorOptionsValueSelect || '206',
				type: 1,
				IsSearchCorr: "true",
			};
			getCorrColorData(dataJson).then((res) => {
				this.legendListSelect = [];
				if (res.data.code != 0) {
					return;
				}
				this.legendListSelect = res.data.data;
			});
		},
		//右下角图纸中markup选中回调
		onMarkupSelected(e) {
			this.$refs.bHTabel.setCurrentByR(e);

			if (this.$refs.threeView) {
				this.$refs.threeView.toSelect3dBallMarkerByStr(e);
			}
		},
		onThreedMarkupSelected(e) {
			// 表格去选中
			this.$refs.bHTabel.setCurrentByR(e);

			// 图纸去选中
			if (this.$refs.cadViewForBH) {
				this.$refs.cadViewForBH.setSelectedMarkup(e);
			}
		},
		updateSvgAndMarkups() {
			this.testFlg++;
			if (this.testFlg != 1) {
				return
			}
			setTimeout(() => {
				this.testFlg = 0;
			}, 0);
			// 根据
			this.$refs.cadViewForBH.loadSvgDataByRow(
				this.leftTabelRow.macCode,
				this.colorOptionsValueSelect,
				this.colorOptionsValue,
				this.LifeAssBaseVaule,
				this.leftTabelRow.pltCode,
				this.macName,
				this.valuePlant,
				this.leftTabelRow.macType,
				this.styleOptionsValue != 2,
				this.value, // 筛选检查分区
				this.judgValue,
				this.positionValue,
				3
			);
			this.update3dAndMarkups();
		},

		update3dAndMarkups() {
			if (this.$refs.threeView) {
				this.$refs.threeView.loadSvgDataByRow(
					this.leftTabelRow.macCode,
					this.colorOptionsValueSelect,
					this.colorOptionsValue,
					this.LifeAssBaseVaule,
					this.leftTabelRow.pltCode,
					this.macName,
					this.valuePlant,
					this.leftTabelRow.macType,
					this.styleOptionsValue != 2,
					this.value, // 筛选检查分区
					this.judgValue,
					this.positionValue
				);

				this.$refs.threeView.getThreeNumberList(this.leftTabelRow.macCode);
			}
		},
		async getThckLineChatDateApi(D) {

			let R = await getThckLineChatDate(D);
			return R.data.data
		},
		//获取折线图数据
		async getLineChartDataApi(row, type) {


			// 清空图表
			document.getElementById("LineEcharts").innerHTML = "";

			this.timeEnd = [];
			this.timeStart = [];

			this.timeStartValue = "";
			this.timeEndValue = "";
			let DATE = await this.getThckLineChatDateApi({
				Account: getLocalStorage("userName"),
				dmgCode: this.leftTabelRow.macCode,
				PosNo: Number(row.POS_NO),
				ClsType: Number(row.CLS_TYPE)
			})
			// try {
			if (DATE.fromDate.length == 0) {
				return
			}
			if (this.timeStart.length == 0) {
				DATE.fromDate.forEach((Item) => {
					this.timeStart.push({
						id: Item,
						label: Item,
					});
				});
			}
			if (this.timeEnd.length == 0) {
				DATE.toDate.forEach((Item) => {
					this.timeEnd.push({
						id: Item,
						label: Item,
					});
				});
			}

			row.beginDate = DATE.fromDate[0];
			row.endDate = DATE.toDate[0];
			this.timeStartValue = this.timeStart[0].id;
			// this.timeStart.length == 0 ? "" : this.timeStart[0].id;
			this.timeEndValue = this.timeEnd[0].id;
			// this.timeEnd.length == 0 ? "" : this.timeEnd[0].id;
			console.log(this.timeStart, '11111111111');
			console.log(this.timeStartValue, '22222222222');
			console.log(this.timeEnd, '3333333333');
			console.log(this.timeEndValue, '4444444444444');
			// } catch (error) {

			// }
			this.detailBhlTabel = row;
			let dataJson = {
				pltName: this.valuePlant,
				macNum: row.MAC_NUMB,
				posOrdr:
					row.POS_ORDR == null && row != null
						? null
						: parseInt(row.POS_ORDR),
				msrPnt: row.MSR_PNT == '-' ? '' : row.MSR_PNT,
				ispDateBegin:
					type == "change" ? this.timeStartValue : row.beginDate,
				ispDateEnd: type == "change" ? this.timeEndValue : row.endDate,
				dmgCode: this.leftTabelRow.macCode,
				lifeAssBaseDate: this.LifeAssBaseVaule,
				pltCode: this.leftTabelRow.pltCode,
				UserId: getLocalStorage("userID"),
				Account: getLocalStorage("userName")
			};

			getLineChartData(dataJson)
				.then((res) => {

					if (res.data.code == -400) {
						this.$message({
							message:
								this.$t('message.public.tip3'),
							type: "warning",
						});
						document.getElementById("LineEcharts").innerHTML = "";
						return;
					}
					if (res.data.code != 0) {
						//没有数据清空图表
						document.getElementById("LineEcharts").innerHTML = "";
						return;
					}
					this.Data = res.data.data;
					let data = res.data.data;
					//判断格式，改成年月日类型的
					let dType = false;
					let tempDate = [];
					data.date.forEach(i => {
						if (i.split('-')[2].length == 4) {
							dType = true;
							i = `${i.substr(6, 9)}-${i.substr(0, 5)}`
							tempDate.push(i)
						}
					})
					if (dType) data.date = tempDate;

					if (
						data.date.length == 0 ||
						data.datePeriodBegin.length == 0 ||
						data.datePeriodEnd.length == 0
					) {
						return;
					}
					console.log(777);
					this.IinearEquationInTwoUnknowns(data);

					// data.datePeriodBegin.forEach((Item) => {
					// 	this.timeStart.push({
					// 		id: Item,
					// 		label: Item,
					// 	});
					// });

					// data.datePeriodEnd.forEach((Item) => {
					// 	this.timeEnd.push({
					// 		id: Item,
					// 		label: Item,
					// 	});
					// });
					console.log(this.timeStart, 'dddddddddddddddd');

					// this.timeStartValue =
					// 	this.timeStart.length == 0 ? "" : this.timeStart[0].id;
					// this.timeEndValue =
					// 	this.timeEnd.length == 0 ? "" : this.timeEnd[0].id;
				})
				.catch(() => {
					document.getElementById("LineEcharts").innerHTML = "";
				});
		},
		//折线图生成
		drawLine(
			date,
			managerValue,
			wallThck,
			lineNameList,
			ORG_THCK,
			verticalAxisMinValue,
			lineChartST,
			lineLongChartST,
			verticalAxisMaxValue,
			leastSquare,
			realValue,
			positionName
		) {
			console.log(789, date[date.length - 1], wallThck, wallThck.data[wallThck.data.length - 1].value[1]);
			let myChart = this.$echarts.init(
				document.getElementById("LineEcharts")
			);
			let _this = this;
			let option = {
				backgroundColor: "rgb(255,250,240)",
				tooltip: {
					trigger: "axis",
					formatter: function (params) {
						// console.log(params, "params-----");
						let list = [
							`<span style="width:200px; display:inline-block;margin-left:20px">${_this.$t(
								"message.chart.label_1"
							)}&nbsp&nbsp${params[0].value[0]}</span><br>
              <span style="width:200px; display:inline-block;margin-left:20px">${_this.$t(
								"message.chart.label_2"
							)}&nbsp&nbsp${positionName}</span>
            `,
						];
						let listItem = "";
						params.forEach((element) => {
							if (typeof element.value == "undefined") {
								element.value = "";
							}
							if (
								element.seriesName != "長期" &&
								element.seriesName != "短期" &&
								element.seriesName != "最小二乗法"
							) {
								list.push(
									`<i style="display: inline-block;width: 10px;height: 10px;background:${element.color
									};margin-right: 5px;border-radius: 50%;}"></i>
                <span style="width:200px; display:inline-block;">${element.seriesName
									}&nbsp&nbsp${element.value[1]
										? element.value[1]
										: element.value[1] === null
											? ""
											: element.value[0]
									}</span> 
                `
								);
							}
						});
						listItem = list.join("<br>");
						return '<div class="showBox">' + listItem + "</div>";
					},
				},
				color: [
					// "rgb(156, 44, 154)", //紫
					// "rgb(206, 200, 142)", //黄
					"rgb(206, 200, 142)", //黄
					"rgb(156, 44, 154)", //紫
					"rgb(30, 30, 255)", //蓝
					"rgb( 255, 31, 30)", //红
					"rgb(0,128,0)", // 绿
					"rgb( 0,0,0)", //黑
				],
				legend: {
					data: lineNameList,
					top: 10,
				},
				grid: {
					top: "10%",
					left: "3%",
					right: "4%",
					bottom: "5%",
					containLabel: true,
				},
				xAxis: {
					type: "time",
					boundaryGap: false,
					data: date,
					axisLabel: {
						rotate: 0, // 旋转角度
						interval: this.interval, //设置X轴数据间隔几个显示一个，为0表示都显示
					},
					splitLine: {
						show: false,
					},
				},
				yAxis: {
					type: "value",
					max: verticalAxisMaxValue,
					// min: 2, //纵坐标最小值
					min: verticalAxisMinValue,
					splitLine: {
						show: false,
					},
				},
				series: [
					// {
					// 	name: wallThck.name,
					// 	type: "line",
					// 	data: wallThck.data,
					// 	symbol: "none",
					// 	itemStyle: {
					// 		normal: {
					// 			lineStyle: {
					// 				color: "rgb(206, 200, 142)",
					// 			},
					// 		},
					// 	},
					// },
					{
						name: wallThck.name,
						type: "line",
						data: wallThck.data,
						symbol: "none",
						itemStyle: {
							normal: {
								lineStyle: {
									color: "rgb(206, 200, 142)",
								}
							}
						},
						markPoint: {
							data: [
								{
									coord: [date[date.length - 1], wallThck.data[wallThck.data.length - 1].value[1]],
									symbolSize: 1,

									label: {
										formatter: [
											`{a|${this.Data.initVal}}`,
										].join('\n'),
										backgroundColor: 'rgb(173,216,230)',
										borderColor: '#333',
										borderWidth: 2,
										padding: 5,
										color: '#000',

										lineHeight: 30,
										rich: {
											a: {
												color: '#000',
												lineHeight: 10,
											},
										}
									}
								}
							]
						},
					},

					// {
					// 	name: managerValue.name,
					// 	type: "line",
					// 	data: managerValue.data,
					// 	smooth: false,
					// 	symbol: "none",
					// 	itemStyle: {
					// 		normal: {
					// 			lineStyle: {
					// 				color: "rgb(156, 44, 154)",
					// 			},
					// 		},
					// 	},
					// },

					{
						name: managerValue.name,
						type: "line",
						data: managerValue.data,
						smooth: false,
						symbol: "none",
						itemStyle: {
							normal: {
								lineStyle: {
									color: "rgb(156, 44, 154)",
								},
							},
						},
						markPoint: {
							data: [
								{
									coord: [date[date.length - 1], managerValue.data[managerValue.data.length - 1].value[1]],
									symbolSize: 1,

									label: {
										formatter: [
											`{a|${this.Data.manVal}}`,
										].join('\n'),
										backgroundColor: 'rgb(173,216,230)',
										borderColor: '#333',
										borderWidth: 2,
										padding: 5,
										color: '#000',

										lineHeight: 30,
										rich: {
											a: {
												color: '#000',
												lineHeight: 10,
											},
										}
									}
								}
							]
						},
					},

					{
						name: lineChartST.name,
						type: "line",
						data: lineChartST.lineChartSTData,
						symbol: "none",
						smooth: false,
						itemStyle: {
							normal: {
								lineStyle: {
									color: "rgb(30, 30, 255)",
									type: "dotted",
								},
							},
						},
					},

					{
						name: lineLongChartST.name,
						type: "line",
						data: lineLongChartST.lineChartSTData,
						symbol: "none",
						smooth: false,
						itemStyle: {
							normal: {
								lineStyle: {
									color: "rgb( 255, 31, 30)",
									type: "dotted",
								},
							},
						},
					},

					{
						name: leastSquare.name,
						type: "line",
						data: leastSquare.data,
						connectNulls: true,
						symbol: "none",
						itemStyle: {
							normal: {
								lineStyle: {
									color: "rgb(0,128,0)",
									type: "dotted",
								},
							},
						},
					},

					{
						name: realValue.name,
						type: "line",
						data: realValue.data,
						connectNulls: true,
						itemStyle: {
							normal: {
								lineStyle: {
									color: "rgb( 0,0,0)",
								},
							},
						},
					},
				],
			};

			this.$store.state.test = option;
			console.log(this.$store.state.test, 'LLLLLLLLLLLLLLLLLLL')
			myChart.setOption(option);
			$("#LineEcharts").removeAttr("_echarts_instance_");

			// window.onresize = function () {
			//   myChart.resize();
			// };
			window.addEventListener(
				"resize",
				() => {
					myChart.resize();
				},
				false
			);
			document.addEventListener("mousemove", function () {
				myChart.resize();
			});
		},
		//短期数据处理 二元一次方程
		IinearEquationInTwoUnknowns(data) {
			console.log(888);
			if (
				!data.lineChartST.lineChartSTData ||
				data.lineChartST.lineChartSTData.length == 0
			) {
				document.getElementById("LineEcharts").innerHTML = "";
				return;
			}
			// 短期数据处理
			let algebraData = data.lineChartST.lineChartSTData;

			var Equation = algebra.Equation;
			console.log('Equation', Equation);
			let Regtest = new RegExp(/-/g);
			let x1 =
				new Date(algebraData[0].stUpdateTime).getTime() / 100000000000;
			let x2 =
				new Date(algebraData[1].stUpdateTime).getTime() / 100000000000;

			// let x1 = algebraData[0].stUpdateTime.replace(Regtest, "").slice(0, 6);
			// let x2 = algebraData[1].stUpdateTime.replace(Regtest, "").slice(0, 6);
			let numberData1 = algebra.parse(
				`${algebraData[0].stValue} = k ${x1} + b`
			);
			let numberData2 = algebra.parse(
				`${algebraData[1].stValue} = k ${x2} + b`
			);
			console.log(999);

			var answer1 = numberData1.solveFor("k");
			var answer2 = numberData2.solveFor("k");
			console.log('answer1', answer1);
			console.log('answer2', answer2);
			//解出b值
			var eq = new Equation(answer1, answer2);
			console.log("b表达式：", eq);
			console.log("b表达式：" + eq.toString());
			var answerB = 1;
			try {
				answerB = eq.solveFor("b");
			} catch (error) {

			}
			console.log("解出b的值为：" + answerB.toString());
			eq = numberData1.eval({
				b: answerB,
			});
			console.log("k表达式：" + eq.toString());
			var answerK = '1275865250465554/524742963672475';
			try {
				answerK = eq.solveFor("k");
			} catch (error) {

			}
			console.log("解出k的值为：" + answerK.toString());
			let lineChartST = {
				name: data.lineChartST.name,
				lineChartSTData: this.calculation(data.date, answerK, answerB),
			};
			console.log(1010);

			// 长期数据处理 ------------------------------------------------
			// let algebralongData
			let algerbraLongData = data.lineChartSTLong.listLineChartSTLong;

			let x3 =
				new Date(algerbraLongData[0].stUpdateTime).getTime() /
				100000000000;
			let x4 =
				new Date(algerbraLongData[1].stUpdateTime).getTime() /
				100000000000;
			let numberData3 = algebra.parse(
				`${algerbraLongData[0].stValue} = j ${x3} + c`
			);
			let numberData4 = algebra.parse(
				`${algerbraLongData[1].stValue} = j ${x4} + c`
			);
			var answer3 = numberData3.solveFor("j");
			var answer4 = numberData4.solveFor("j");

			var eqLong = new Equation(answer3, answer4);
			// console.log("c表达式：" + eqLong.toString());
			var answerC = eqLong.solveFor("c");
			// console.log("解出c的值为：" + answerC.toString());
			eqLong = numberData3.eval({
				c: answerC,
			});
			// console.log("j表达式：" + eqLong.toString());
			var answerJ = eqLong.solveFor("j");
			// console.log("解出j的值为：" + answerJ.toString());

			let lineLongChartST = {
				name: data.lineChartSTLong.name,
				lineChartSTData: this.calculationLong(
					data.date,
					answerJ,
					answerC
				),
			};
			// ----最小二乘法处理
			let leastSquareData = [];
			for (let i = 0; i < data.leastSquare.data.length; i++) {
				let arr = [];
				arr.push(data.date[i], data.leastSquare.data[i]);
				leastSquareData.push({ value: arr });
			}
			let leastSquareJson = {
				name: data.leastSquare.name,
				data: leastSquareData,
			};

			// ----测定值处理
			let realValueData = [];
			for (let i = 0; i < data.realValue.data.length; i++) {
				let arr = [];
				arr.push(data.date[i], data.realValue.data[i]);
				realValueData.push({ value: arr });
			}
			let realValueJson = {
				name: data.realValue.name,
				data: realValueData,
			};
			// ----管理值处理
			let managerValueData = [];
			for (let i = 0; i < data.managerValue.data.length; i++) {
				let arr = [];
				arr.push(data.date[i], data.managerValue.data[i]);
				managerValueData.push({ value: arr });
			}
			let managerValueJson = {
				name: data.managerValue.name,
				data: managerValueData,
			};

			// ---- 元肉厚

			let wallThckData = [];
			for (let i = 0; i < data.wallThck.data.length; i++) {
				let arr = [];
				arr.push(data.date[i], data.wallThck.data[i]);
				wallThckData.push({ value: arr });
			}
			let wallThckJson = {
				name: data.wallThck.name,
				data: wallThckData,
			};
			console.log(lineChartST, "lineChartST");
			// console.log(data.date,
			//   managerValueJson,
			//   wallThckJson,
			//   // 图例名称
			//   data.lineNameList,
			//   this.detailBhlTabel.ORG_THCK,
			//   data.verticalAxisMinValue,
			//   lineChartST,
			//   lineLongChartST,
			//   data.verticalAxisMaxValue,
			//   leastSquareJson,
			//   realValueJson,
			//   data.positionName, "------");
			console.log(data, 'DDDDDDDDD');
			console.log(data.date, 'DDDDDDDDD');
			this.drawLine(
				// 时间
				data.date,
				managerValueJson,
				wallThckJson,
				// 图例名称
				data.lineNameList,
				this.detailBhlTabel.ORG_THCK,
				data.verticalAxisMinValue,
				lineChartST,
				lineLongChartST,
				data.verticalAxisMaxValue,
				leastSquareJson,
				realValueJson,
				data.positionName
			);
		},
		//折线图日期修改
		changeChartDate() {
			// this.getLineChartDataApi(this.detailBhlTabel,'change')
			// this.detailBhlTabel = row;
			let row = this.detailBhlTabel;
			let dataJson = {
				pltName: this.valuePlant,
				macNum: row.MAC_NUMB,
				posOrdr:
					row.POS_ORDR == null && row != null
						? null
						: parseInt(row.POS_ORDR),
				msrPnt: row.MSR_PNT == '-' ? '' : row.MSR_PNT,
				ispDateBegin: this.timeStartValue,
				ispDateEnd: this.timeEndValue,
				dmgCode: this.leftTabelRow.macCode,
				lifeAssBaseDate: this.LifeAssBaseVaule,
				pltCode: this.leftTabelRow.pltCode,
				UserId: getLocalStorage("userID"),
				Account: getLocalStorage("userName")
			};
			getLineChartData(dataJson).then((res) => {
				console.log(dataJson, res.data.data);
				if (res.data.code != 0) {
					//没有数据清空图表
					document.getElementById("LineEcharts").innerHTML = "";
					return;
				}
				this.Data = res.data.data;
				console.log('this.Data', this.Data);

				let data = res.data.data;
				this.IinearEquationInTwoUnknowns(data);
			});
		},
		calculation(xData, k, b) {
			let yData = [];
			let newXData = [];
			let Regtest = new RegExp(/-/g);
			let kVaule = k.numer / k.denom;
			let bVaule = b.numer / b.denom;
			xData.forEach((Item, index) => {
				newXData.push(new Date(Item).getTime() / 100000000000);
			});

			// 获取俩个点的数据
			let x0 = kVaule * newXData[0] + bVaule;
			// let xLast = kVaule * newXData.pop() + bVaule;
			let xLast = kVaule * newXData.pop() + bVaule;
			yData.push([xData[0], Math.floor(x0 * 100) / 100]);
			yData.push([
				xData[xData.length - 1],
				Math.floor(xLast * 100) / 100,
			]);

			// 获取所有y轴的点
			// newXData.forEach((Item) => {
			//   let num = kVaule * Item + bVaule;
			//   yData.push(Math.floor(num * 100) / 100);
			// });

			// let lineData = [];
			// for (let i = 0; i < xData.length; i++) {
			//   let arr = [];
			//   arr.push(xData[i], yData[i])
			//   lineData.push({ value: arr });
			// }
			// console.log(yData,"---------------------");
			return yData;
		},
		calculationLong(xData, k, b) {
			let yData = [];
			let newXData = [];
			let Regtest = new RegExp(/-/g);
			let kVaule = k.numer / k.denom;
			let bVaule = b.numer / b.denom;
			xData.forEach((Item, index) => {
				newXData.push(new Date(Item).getTime() / 100000000000);
			});
			// newXData.forEach((Item) => {
			//   let num = kVaule * Item + bVaule;
			//   yData.push(Math.floor(num * 100) / 100);
			// });
			let x0 = kVaule * newXData[0] + bVaule;
			let xLast = kVaule * newXData.pop() + bVaule;
			yData.push([xData[0], Math.floor(x0 * 100) / 100]);
			yData.push([
				xData[xData.length - 1],
				Math.floor(xLast * 100) / 100,
			]);
			// let lineData = [];
			// for (let i = 0; i < xData.length; i++) {
			//   let arr = [];
			//   lineData.push(arr[(xData[i], yData[i])]);
			// }
			return yData;
		},
		//检查区分
		getCheckPointDataApi(macCode) {
			let dataJson = {
				DmgCode: macCode,
				type: 1,
			};
			getCheckPointData(dataJson).then((res) => {
				this.options = [];
				if (res.data.code != 0) {
					return;
				}
				this.options = res.data.data;
			});
		},
		//检查区分筛选
		selectOption() {

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				this.valueTemp = this.value;

				this.$store.commit("changeCheckCode", this.value);
				console.log('触发条件gethckTabDataApi-444');
				this.gethckTabDataApi(
					this.leftTabelRow.macCode,
					this.LifeAssBaseVaule,
					this.pageSize,
					this.pageIndex,
					this.leftTabelRow.macType,
					this.leftTabelRow.pltCode,
					this.btnActive,
					this.value,
					this.colorOptionsValue,
					this.judgValue,
					this.positionValue
				);
				this.updateSvgAndMarkups();
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}
		},
		async getOfferHeaderObjctlApi(Num) {
			let dataJson = {
				type: 2,
				cntlName: "AccThckList",
				formID: "AccThckList",
				language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
			};
			let res = await getOfferHeaderObjctl(dataJson);
			return res.data.data;
		},
		//获取表格配置数据
		getSysConfigApi() {
			let dataJson = {
				userId: this.userName,
				listName: "AccThckLst",
				language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
			};
			getSysConfig(dataJson).then(async (res) => {
				this.loadFlag = false;
				let data = JSON.parse(res.data.data);
				this.tabelConfigObject = data[0];

				console.log('sdfsd', JSON.parse(res.data.data));

				// let titles = await this.getOfferHeaderObjctlApi();
				// console.log(titles, Object.keys(this.tabelConfigObject), '表格配置');
				// Object.keys(this.tabelConfigObject).forEach((item, index) => {
				// 	if (item == 'CL_NAME') {
				// 		console.log(item, titles[index], 'item');
				// 	}

				// 	this.tabelConfigObject[item].title = titles[index];
				// })
				console.log(this.tabelConfigObject, '表格配置');
			});
			// .finally(() => {
			//     this.loadFlag = false;
			// });
		},
		//腐蚀率、余肉厚值筛选修改
		judgChange() {

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				this.judgValueTemp = this.judgValue;

				this.$store.commit("changeJudgCode", this.judgValue);
				console.log("changeJudgCode", this.judgValue);
				console.log('触发条件gethckTabDataApi-555');
				this.gethckTabDataApi(
					this.leftTabelRow.macCode,
					this.LifeAssBaseVaule,
					this.pageSize,
					this.pageIndex,
					this.leftTabelRow.macType,
					this.leftTabelRow.pltCode,
					this.btnActive,
					this.value,
					this.colorOptionsValueSelect,
					this.judgValue,
					this.positionValue
				);
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},

		postionValueFn() {
			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			let Fn = () => {
				this.positionValueTemp = this.positionValue;

				this.$store.commit('changePositionCode', this.positionValue);
				console.log('触发条件gethckTabDataApi-666');
				this.gethckTabDataApi(
					this.leftTabelRow.macCode,
					this.LifeAssBaseVaule,
					this.pageSize,
					this.pageIndex,
					this.leftTabelRow.macType,
					this.leftTabelRow.pltCode,
					this.btnActive,
					this.value,
					this.colorOptionsValueSelect,
					this.judgValue,
					this.positionValue
				)
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}
		},
		freshFn(flg = true) {
			if (flg) {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			let Fn = () => {
				console.log('触发条件gethckTabDataApi-777', this.value, this.positionValue);
				this.gethckTabDataApi(
					this.leftTabelRow.macCode,
					this.LifeAssBaseVaule,
					this.pageSize,
					this.pageIndex,
					this.leftTabelRow.macType,
					this.leftTabelRow.pltCode,
					this.btnActive,
					this.value,
					this.colorOptionsValueSelect,
					this.judgValue,
					this.positionValue
				)
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}
		},


		//获取部位
		getPositionDataApi(dmgCode) {
			let dataJson = {
				dmgCode: dmgCode,
				type: 1,
			};
			getPositionData(dataJson)
				.then((res) => {
					if (res.data.code != 0) {
						this.positionList = [];
						this.positionValue = "-1";
						return;
					}
					this.positionList = res.data.data;
					// this.positionValue = this.positionList[0].key
				})
				.catch(() => {
					this.positionList = [];
					this.positionValue = "-1";
				});
		},
		// 模型显示切换
		modelClick() {


			if (!this.is3DModalEnable)
				return;

			this.rightViewFlag = false;
			this.rightResultViewFlag = false;

			const _this = this;
			let parentWidth = $(".CompontensViews").width();
			if (!_this.ViewerFlag) {
				_this.interval = 5;

				$(".CADView").animate(
					{ width: parentWidth / 2 },
					300,
					function () {
						_this.ViewerFlag = !_this.ViewerFlag;
						if (_this.styleOptionsValue == 1) {
							_this.getLineChartDataApi(_this.prposTabelData[0]);
						} else if (_this.styleOptionsValue == 2) {
							_this.updateSvgAndMarkups();
						}
					}
				);
				$(".tabel-view-wrapper").animate(
					{ width: parentWidth / 2 },
					300
				);
				$(".select-legend-view").animate(
					{ width: parentWidth / 2 },
					300
				);
			} else {
				_this.interval = 1;
				_this.ViewerFlag = !_this.ViewerFlag;
				$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
				$(".select-legend-view").animate({ width: parentWidth }, 300);
				$(".CADView").animate({ width: parentWidth }, 300, function () {
					if (_this.styleOptionsValue == 1) {
						_this.getLineChartDataApi(_this.prposTabelData[0]);
					} else if (_this.styleOptionsValue == 2) {
						_this.updateSvgAndMarkups();
					}
				});
			}
			// 防止底部
			eventBus.$emit("resetTabelStyleForBH");
		},
		//式样
		cpsClick(isShowSave = true) {
			// if (this.rightResultViewFlag) {
			// 	this.rightCpsClick()
			// }
			if (!isShowSave) {
				this.$store.commit("changeIsCurrentNext", true);
			} else {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			//初始监听状态
			// if (this.rightViewFlag && isShowSave) {
			// 	eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			// }

			let Fn = () => {
				this.$store.state.TH_INfo_view1Info.initType = 2;
				setTimeout(() => {
					eventBus.$emit('reGetBHTab1Data');
				}, 700);

				let _this = this;
				let parentWidth = $(".CompontensViews").width();
				this.rightResultViewFlag = false;

				this.ViewerFlag = false;


				if (!_this.rightViewFlag) {

					$(".CADView").animate(
						{ width: parentWidth - 716 },
						300,
						function () {
							_this.rightViewFlag = !_this.rightViewFlag;
							if (_this.styleOptionsValue == 1) {
								//
							} else if (_this.styleOptionsValue == 2) {
								_this.updateSvgAndMarkups();
							}
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth - 716 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth - 716 },
						300
					);
				} else {

					_this.rightViewFlag = !_this.rightViewFlag;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						if (_this.styleOptionsValue == 1) {
							//
						} else if (_this.styleOptionsValue == 2) {
							_this.updateSvgAndMarkups();
						}
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}
				setTimeout(() => {
					this.$refs.bHTabel.doLayoutFn();
				}, 500);
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}


		},
		//结果
		rightCpsClick(isShowSave = true) {
			// if (this.rightViewFlag) {
			// 	this.cpsClick()
			// }
			if (!isShowSave) {
				this.$store.commit("changeIsCurrentNext", true);
			} else {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			//初始监听状态
			// if (this.rightResultViewFlag && isShowSave) {
			// 	eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			// }

			let Fn = () => {
				let _this = this;
				this.rightViewFlag = false;

				this.ViewerFlag = false;
				let parentWidth = $(".CompontensViews").width();

				setTimeout(() => {
					this.$refs.MSTabel.setCurrentByR(0);
				}, 500);

				if (!_this.rightResultViewFlag) {
					$(".CADView").animate(
						{ width: parentWidth - 716 },
						300,
						function () {
							_this.rightResultViewFlag = !_this.rightResultViewFlag;
							if (_this.styleOptionsValue == 1) {
								// 
							} else if (_this.styleOptionsValue == 2) {
								_this.updateSvgAndMarkups();
							}
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth - 716 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth - 716 },
						300
					);
				} else {
					_this.rightResultViewFlag = !_this.rightResultViewFlag;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						if (_this.styleOptionsValue == 1) {
							// 
						} else if (_this.styleOptionsValue == 2) {
							_this.updateSvgAndMarkups();
						}
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}
				setTimeout(() => {
					this.$refs.bHTabel.doLayoutFn();
				}, 500);
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},

		getThreeNumberList() {
			this.is3DModalEnable = false;
			if (this.leftTabelRow.macCode == null) {
				return;
			}
			getTotDimensInteractive({
				dmgCode: this.leftTabelRow.macCode,
			}).then((res) => {
				if (res.data.code == 0 && res.data.data && res.data.data.length > 0) {
					this.is3DModalEnable = true;
				} else {
					this.is3DModalEnable = false;
				}
			});
		},
	},
	created() {
		this.judgValue = this.$store.state.judgCode;
		this.judgValueTemp = this.$store.state.judgCode;
		let _this = this;
		let getCorrDataFun = getCorrData({ Type: 2 }).then((res) => {
			if (res.data.code != 0) {
				this.colorOptions = [];
				return;
			}
			_this.colorOptions = res.data.data;
			_this.colorOptionsValue = _this.colorOptions[0].key;
			this.colorOptionsValueSelectTemp = this.colorOptions[0].key;
			_this.$store.state.colorOptionsCode == ""
				? (_this.colorOptionsValueSelect = _this.colorOptions[0].key)
				: (_this.colorOptionsValueSelect =
					_this.$store.state.colorOptionsCode);
			getCalculRules().then((res) => {
				_this.CalculationRules = res.data.data;
			});
		});
		let getLifeAssBaseDateFun = getLifeAssBaseDate().then((res) => {
			if (res.data.code != 0) {
				return;
			}
			res.data.data.forEach((dateItem) => {
				this.LifeAssBaseDate.push({
					label: dateItem,
					value: dateItem,
				});
			});
			this.$store.state.lifeAssBaseCode
				? (this.LifeAssBaseVaule = this.$store.state.lifeAssBaseCode)
				: (this.LifeAssBaseVaule = this.LifeAssBaseDate[6].value);

			this.LifeAssBaseVauleTemp = this.LifeAssBaseVaule;
		});
		let getSysConfigApiFun = getSysConfig({
			userId: this.userName,
			listName: "AccThckLst",
		}).then((res) => {
			this.loadFlag = false;
			let data = JSON.parse(res.data.data);
			this.tabelConfigObject = data[0];
			// console.log(data[0],'表格配置');
		});
		//     .finally(() => {
		//         this.loadFlag = false;
		//     });
		Promise.all([
			getLifeAssBaseDateFun,
			getSysConfigApiFun,
			this.getCheckPointDataApi(this.leftTabelRow.macCode),
			this.getPositionDataApi(this.leftTabelRow.macCode),
			getCorrDataFun,
		]).then(() => {
			this.getCorrColorDataApiTop(this.colorOptionsValueSelect);
		});

		// 宽高比
		let windowWhRadio =
			document.documentElement.clientWidth /
			document.documentElement.clientHeight;
		if (windowWhRadio > 1.78) {
			this.tableRadio = "50%";
			this.drawRadio = "50%";
			this.nTableRadio = 0.5;
		} else {
			this.tableRadio = "40%";
			this.drawRadio = "60%";
			this.nTableRadio = 0.4;
		}
	},
	mounted() {
		this.styleFun();
		let _this = this;
		this.$nextTick(function () {
			document.onselectstart = function () {
				return false;
			};
			this.btnActive = this.$store.state.bhdateCode;
			this.styleOptionsValue = this.$store.state.bhStyleCode;
			if (this.styleOptionsValue == 3) {
				this.tableHeight = $(".CompontensViews").height() - 50;
			} else {
				_this.tableHeight =
					$(".CompontensViews").height() * this.nTableRadio - 40;
			}
		});

		eventBus.$on("LoadTabelData", (DMG = false) => {
			console.log('触发条件gethckTabDataApi-888');
			_this.gethckTabDataApi(
				_this.leftTabelRow.macCode,
				_this.LifeAssBaseVaule,
				_this.pageSize,
				_this.pageIndex,
				_this.leftTabelRow.macType,
				_this.leftTabelRow.pltCode,
				_this.btnActive,
				_this.value,
				_this.colorOptionsValue,
				_this.judgValue,
				_this.positionValue,
				DMG
			);
		});
		eventBus.$on("loadLineChart", function () {
			_this.getLineChartDataApi(_this.prposTabelData[0]);
		});


		//  如果保存报错则-切换之前的搜索状态
		eventBus.$on("backParamsForLeftView", () => {
			this.value = this.valueTemp;
			this.colorOptionsValueSelect = this.colorOptionsValueSelectTemp;
			this.judgValue = this.judgValueTemp;
			this.positionValue = this.positionValueTemp;
			this.LifeAssBaseVaule = this.LifeAssBaseVauleTemp;
		})

		

	},
	beforeDestroy() {
		eventBus.$off("LoadTabelData");
		eventBus.$off("loadLineChart");
		eventBus.$off("backParamsForLeftView");
		window.removeEventListener("resize", function () { });
	},
};
</script>

<style lang="scss" scoped>
.CompontensViews {
	width: 100%;
	height: 100%;
	position: relative;

	.Viewer,
	.right-Viewer,
	.right-Viewer2 {
		position: absolute;
		width: 700px;
		height: calc(100% - 60px);
		background: #fff;
		right: 0;
		top: 56px;
		z-index: 66;

		.get-url-view {
			position: absolute;
			z-index: 666;
			bottom: 10px;
			left: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 80%;
		}
	}

	.Viewer {
		width: 50%;
	}

	.item i {
		margin-right: 20px;
	}

	.right-content-title {
		padding: 16px 0 16px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left-select {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.selectView {
				margin-right: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.select-btn {
					min-width: 100px;
					height: 24px;
					// background: #106ebe;
					// color: #fff;
					// border: 1px solid #eaeaeb;
					border-radius: 4px;
					cursor: pointer;
				}

				.selectViewLabel {
					line-height: 24px;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.65);
				}

				.select-ipt {
					width: 112px;
					height: 24px;

					::v-deep .el-input__inner {
						width: 112px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}

				.samll-ipt {
					width: 95px;

					::v-deep .el-input__inner {
						width: 95px;
					}
				}

				.judgValue-ipt {
					width: 120px;

					::v-deep .el-input__inner {
						width: 120px;
					}
				}

				.show-ipt {
					width: 100px;

					::v-deep .el-input__inner {
						width: 100px;
					}
				}

				.positionValue {
					width: 145px;

					::v-deep .el-input__inner {
						width: 145px;
					}
				}
			}

			.refresh {
				min-width: 40px;
				height: 24px;
				border-radius: 4px;
				border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				.iconfont {
					margin: 0 4px;
					font-size: 17px;
					height: 24px;
					line-height: 24px;
				}
			}

			.DViewer {
				margin-left: 8px;
				// min-width: 40px;
				height: 24px;
				// border-radius: 4px;
				// border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;

				// cursor: pointer;
				.iconfont,
				.el-icon-document {
					font-size: 20px;
					margin: 0 12px;
					color: #2a7190;
					cursor: pointer;
				}

				.disable {
					color: lightgray;
				}
			}

			.el-icon-document,
			.el-icon-document-checked {
				font-size: 20px;
				margin: 0 12px;
				color: #2a7190;
				cursor: pointer;
			}
		}

		.right-select {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.date-btn {
				min-width: 66px;
				height: 24px;
				border-radius: 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #eaeaeb;
				margin: 0 4px;
			}

			.date-btn-active {
				// background: #106ebe;
				// color: #fff;
			}

			.select-tab {
				margin-left: 18px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.select-tab-ipt {
					width: 120px;

					::v-deep .el-input__inner {
						width: 120px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}
			}
		}
	}

	.tabel-view-wrapper {
		height: calc(var(--table-radio) - 40px);
		overflow: hidden !important;
	}

	.select-legend-view {
		width: 100%;
		padding: 6px 0;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;

		// overflow-x: auto;
		.left-view {
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		.select-legend {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-right: 24px;

			.select-legend--ipt {
				::v-deep .el-input__inner {
					width: 120px;
					height: 24px;
					color: rgba(0, 0, 0, 0.65);
				}

				::v-deep .el-input__icon {
					line-height: 24px;
				}
			}
		}

		.select-legend-color {
			margin-right: 16px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			min-width: 100px;
			position: relative;

			.select-legend-color-box {
				width: 24px;
				height: 24px;
				border-radius: 2px;
				border: 1px solid #d9d9d9;
				margin-right: 8px;
				cursor: pointer;
			}
		}

		.messageColor {
			min-width: 200px;
			text-align: right;
			display: flex;
			align-items: center;
		}
	}

	.CADView {
		width: 100%;
		// height: calc(50% - 40px);
		height: calc(var(--draw-radio) - 40px);

		// height: 40%;
		position: relative;
		background-color: #fff;
		border: 1px solid #c3c3c3;
		border-top: 3px solid #c3c3c3;

		.iconfont-view {
			position: absolute;
			width: 100%;
			height: 4px;
			left: 0;
			top: -2px;
			opacity: 0;
			transition: 0.5s;
			z-index: 10;
			cursor: pointer;
		}

		#LineEcharts {
			width: 100%;
			height: 100%;
		}

		.dragIcon {
			position: absolute;
			top: -22px;
			left: 50%;
			transform: translate(-50%);
			font-size: 30px;
		}

		.iconfont-view:hover {
			opacity: 1;
		}
	}

	.three-view {
		width: 100%;
		height: 100%;
	}
}

::v-deep .el-table--border td,
::v-deep .el-table--border th,
::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
	border-right: 0 none;
}

.btns {
	display: flex;
	position: absolute;
	right: 130px;
	top: -36px;
	button{
		height: 24px !important;
	}
}
</style>
